<script setup>
import FilterBar from '@/components/FilterBar.vue'
import * as echarts from 'echarts'
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  selectValue: 'week',
})

var dom
var myChart
var option

onMounted(() => {
  dom = document.getElementById('trendChart')
  myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })

  getChartData()
})

function getChartData() {
  $http.get('/screen/person/enter', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = [] } = res || {}

    const xAxis = data.map(item => item.label),
      yData = data.map(item => item.value)

    option = {
      grid: {
        top: '30',
        bottom: '24',
        left: '16',
        right: '16',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#ffffff',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: xAxis,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
              width: 1,
              type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
            },
            interval: 'auto',
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          name: '单位:次',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
              width: 1,
              type: 'solid',
            },
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '',
          type: 'line',
          data: yData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: 'rgba(71, 198, 255, 1)',
              width: 2,
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 152, 221, 0.38)',
              },
              {
                offset: 0.8,
                color: 'rgba(1, 247, 209, 0)',
              },
            ]),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          },
          itemStyle: {
            normal: {
              color: 'rgba(71, 198, 255, 1)',
              borderColor: 'rgba(71, 198, 255, 0.1)',
              borderWidth: 12,
            },
          },
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }

    window.addEventListener('resize', myChart.resize)
  })
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="trendBox">
    <div class="title">入西返西登记趋势</div>

    <FilterBar class="filterBox" :ignore="['今日']" :selectValue="dataObj.selectValue" @change="change" />

    <div style="height: 100%" id="trendChart" class="charts"></div>
  </div>
</template>

<style lang="less" scoped>
.trendBox {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/home/boxbg2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 14px 16px;
  }

  .charts {
    flex: 1;
  }
}
</style>
